﻿<!DOCTYPE html>
<html lang="es"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Sistema </title>
	<head>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" />
		<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css" />
		<link rel="stylesheet" href="css/ui.jqgrid.css" />
		<script src="js/jquery-1.10.2.js"></script>
		<script src="js/jquery.jqGrid.min.js"></script>
		<script src="js/jquery.jqGrid.src.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script src="js/grid.locale-es.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="highcharts/highcharts.js"></script>
		<script src="highcharts/modules/exporting.js"></script>
		
		<style>

			.center-block {
				float: none;
				margin-left: auto;
				margin-right: auto;
			}

			.input-group .icon-addon .form-control {
				border-radius: 0;
			}

			.icon-addon {
				position: relative;
				color: #555;
				display: block;
			}

			.icon-addon:after,
			.icon-addon:before {
				display: table;
				content: " ";
			}

			.icon-addon:after {
				clear: both;
			}

			.icon-addon.addon-md .glyphicon,
			.icon-addon .glyphicon, 
			.icon-addon.addon-md .fa,
			.icon-addon .fa {
				position: absolute;
				z-index: 2;
				left: 10px;
				font-size: 14px;
				width: 20px;
				margin-left: -2.5px;
				text-align: center;
				padding: 10px 0;
				top: 1px
			}

			.icon-addon.addon-lg .form-control {
				line-height: 1.33;
				height: 40px;
				font-size: 18px;
				padding: 10px 16px 10px 40px;
			}

			.icon-addon.addon-sm .form-control {
				height: 30px;
				padding: 5px 10px 5px 28px;
				font-size: 12px;
				line-height: 1.5;
			}

			.icon-addon.addon-lg .fa,
			.icon-addon.addon-lg .glyphicon {
				font-size: 18px;
				margin-left: 0;
				left: 11px;
			}

			.icon-addon.addon-md .form-control,
			.icon-addon .form-control {
				padding-left: 30px;
				float: left;
				font-weight: normal;
			}

			.icon-addon.addon-sm .fa,
			.icon-addon.addon-sm .glyphicon {
				margin-left: 0;
				font-size: 12px;
				left: 5px;
				top: -1px
			}

			.icon-addon .form-control:focus + .glyphicon,
			.icon-addon:hover .glyphicon,
			.icon-addon .form-control:focus + .fa,
			.icon-addon:hover .fa {
				color: #2580db;
			}
			
			.form-control {
				font-size: 12px;
				height: 28px;
				padding: 5px 12px;
			}
			
			body {
				font-size: 12px !important;
				overflow-y: scroll;
				overflow-x: hidden;
			}
			
			.btn {
				padding: 4px 12px;
				font-size: 12px;
			}
			
			a:link   
			{
				font-size: 12px;
				text-decoration:none;   
			}  
			
			a:hover {
				background: #CEECF5;
			}
			
			.form-group {
				margin-bottom: 10px;
			}
			
			.ui-jqgrid .ui-pg-input  {
				height:18px !important;
				font-size: .8em;
				margin: 0;
			}	

			.ui-jqgrid .ui-jqgrid-btable {
				table-layout: auto;
			}

			.ui-widget-overlay {
			  opacity: 0.7;
			  background:"rgb(0, 0, 0)",
			}
						
		</style>
		
		<script>
		
		$(document).ready(function () {

			Lineas();
			Grafica();
			
			$("#btnRegresar").click(function(){
				window.location = "BandejaTableroControl.html";
			});
			
		});
		
		function Lineas(){
				$(function () {
					$('#Grafico2').highcharts({
						title: {
							text: 'Historial de Desviación',
							x: -20 //center
						},
						subtitle: {
							text: '',
							x: -20
						},
						xAxis: {
							categories: [
								'Jul 2014', 'Ago 2014', 'Set 2014', 'Oct 2014', 'Nov 2014', 'Dic 2014']
						},
						yAxis: {
							title: {
								text: 'Rango del Indicador'
							},
							plotLines: [{
								value: 0,
								width: 1,
								color: '#808080'
							}]
						},
						tooltip: {
							valueSuffix: ''
						},
						/*legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'middle',
							borderWidth: 0
						},*/
						legend: {
							layout: 'vertical',
							itemMarginTop: 10,
							itemMarginBottom: 10
						},
						series: [{
							name: 'Desviación',
							data: [7, 6, 9, 12, 8, 10]
						}],
						credits: {
							enabled: false
						},
					});
				});
		}
		
		function Grafica(){
			$(function () {
				$('#Grafico1').highcharts({
					chart: {
						type: 'bar',
						height: 250,
					},
					title: {
						text: 'Efectividad de Entrega'
					},
					subtitle: {
						text: 'Iniciativa: Mejorar Proceso'
					},
					xAxis: {
						categories: ['Meta', 'Valor'],
						title: {
							text: null
						}
					},
					yAxis: {
						min: 0,
						max: 100,
						title: {
							text: '',
							align: 'high'
						},
						labels: {
							overflow: 'justify'
						}
					},
					tooltip: {
						valueSuffix: ''
					},
					plotOptions: {
						bar: {
							dataLabels: {
								enabled: true
							}
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -40,
						y: 100,
						floating: true,
						borderWidth: 1,
						backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
						shadow: true
					},
					credits: {
						enabled: false
					},
					series: [{
					    showInLegend: false,
						name: '2014',
						data: [70,60]
					}]
				});
			});
		}
		
		</script>
		
	</head>
	<body>
		<div class="container">
			<div class="row" style="padding-top:10px">
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="pull-right" style="padding-right: 13px;">
						<span class="link">
						<span class=" glyphicon glyphicon-user"></span>gramos</span>
						<a href="#">Cerrar</a>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="page-header clearfix" style="background: #ef2a24;
				border-radius: 3px;
				padding-top: 20px;
				padding-left: 10px;
				padding-left: 10px;
				padding-bottom: 10px;
				margin: 10px;
				color: #fff;">
						<div class="col-md-4">
							<div class="pull-left">
								<img style="display: block;max-width: 100%;width: 50%;height: 50%;" src="images/logo.jpg"></img>
							</div>
						</div>
						<div class="col-md-8">
							<div class="pull-right">
								<form class="form-inline form-search" role="form">
									<div class="form-group" style="float:left">
										<label style="padding-top:5px;padding-right:10px;padding-top: 12px;" class="control-label" for="txtFilterText">Proveedor</label>
									</div>
									<div class="icon-addon addon-lg" style="float:left">
										<input style="width:250px;font-size:small;" type="text" placeholder="Nombre o Nro de Documento" class="form-control">
										<label class="glyphicon glyphicon-search" rel="tooltip" title=""></label>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">

				<div class="panel-default">
					<div class="col-xs-12">
						<div class="col-md-3">
							<div class="panel-group" id="accordion">
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Asignación</a>
										</h4>
									</div>
									<div id="collapseOne" class="panel-collapse collapse">
										<div class="panel-body" style="font-size:13px">
											<p><a href="AsignacionAsistentesporBanca.html">Asignación de Asistentes por Banca</a></p>
											<p><a href="#">Asignación Manual de Proveedores Sin Banca</a></p>
											<p><a href="ReasignacionAsistentesporBanca.html">Reasignación de Asistentes por Banca</a></p>
											<p><a href="BalanceoGeneralAsignacionProveedores.html">Balanceo General de la Asignación de Proveedores</a></p>
										</div>
									</div>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Carga de Proveedores</a>
										</h4>
									</div>
									<div id="collapseTwo" class="panel-collapse collapse">
										<div class="panel-body">
											<p><a href="#">Registro Masivo</a></p>
											<p><a href="#">Registro Individual</a></p>
										</div>
									</div>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Gestión de Proveedores</a>
										</h4>
									</div>
									<div id="collapseThree" class="panel-collapse collapse">
										<div class="panel-body">
											<p><a href="#">Bandeja de Proveedores</a></p>
										</div>
									</div>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Gestión de Pagos Proveedores</a>
										</h4>
									</div>
									<div id="collapseFour" class="panel-collapse collapse">
										<div class="panel-body">
											<p><a href="#">Bandeja de Pagos Proveedores</a></p>
										</div>
									</div>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Tablero de Control</a>
										</h4>
									</div>
									<div id="collapseFive" class="panel-collapse collapse">
										<div class="panel-body">
											<p><a href="BandejaTableroControl.html">Bandeja del Tablero de Control</a></p>
										</div>
									</div>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Configuración de Políticas</a>
										</h4>
									</div>
									<div id="collapseSix" class="panel-collapse collapse">
										<div class="panel-body">
											<p><a href="#">Mantenimiento</a></p>
											<p><a href="#">Valores de Parámetros Generales</a></p>
											<p><a href="#">Mantenimiento de Asistentes</a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-9">
							<div class="panel panel-default">
								<div class="panel-heading">
									<strong>Bandeja del Tablero de Control</strong>
								</div>
							</div>
							<div class="panel panel-default" style="padding-top:0px !important; margin-top:0px !important">
								<img style="width: 8%;height: 8%;padding:10px" src="images/avatar.gif">
								<strong>Asistente 1</strong>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<strong>Procesos Internos</strong>
								</div>
							</div>
							<div>
								<div class="panel panel-default" style="width:60%;height:100px;float:left;text-align:left;padding-top:40px;padding-left:20px">
									<strong>Indice de Efectivad de Operaciones</strong>
								</div>
								<div class="panel panel-default" style="width:20%;height:100px;float:left;text-align:center">
									<p style="padding-top:10px"><strong>Desviación</strong><p>
									<p style="font-weight:bold;font-size:18px;padding-top:10px;color:#ef2a24">-10.000 uni</p>
								</div>
								<div class="panel panel-default" style="width:20%;height:100px;float:left;text-align:center">
									<p style="padding-top:10px"><strong>Semaforización</strong><p>
									<img style="padding-top:-10px" src="images/big circle red.png">
								</div>
							</div>
							<div class="panel panel-default">
								<div id="Grafico1"></div>
							</div>
							<div class="panel panel-default">
								<div id="Grafico2" style="height:300px"></div>
							</div>
							<div>
								<div class="panel-title" style='width:30%;float:left;text-align:left;padding-left:3px'>
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align:left">Mínima</a>
										<img src='images/small circle red.png'  title='' style='cursor:pointer'/>
									</h4>
								</div>
								<div class="panel-title" style='width:30%;float:left;text-align:center'>
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align:left">Sobresaliente</a>
										<img src='images/small circle yellow.png'  title='' style='cursor:pointer'/>
									</h4>
								</div>
								<div class="panel-title" style='width:30%;float:left;text-align:right'>
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align:left">Satisfactoria</a>
										<img src='images/small circle green.png'  title='' style='cursor:pointer'/>
									</h4>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-12" style="padding-top:20px;padding-bottom:20px">
						<div class="col-md-3"></div>
						<div class="col-md-9">
							<span><input id="btnRegresar" type="button" class="btn btn-default btn-filter " value="Regresar"></span>
						</div>
					<div>
				</div>
			</div>
		</div>
	</div>
			<div class="footer" style="background: #ef2a24;
				border-radius: 3px;
				padding-top: 20px;
				padding-left: 10px;
				padding-left: 10px;
				padding-bottom: 10px;
				margin: 10px;
				color: #fff;">
				<div class="container">
					<div class="col-xs-12">
						<div style="width:50%;float:left;text-align:left">
							<p>Scotiabank - Todos los Derechos Reservados 2014</p>
						</div>
						<div style="width:50%;float:right;text-align:right;padding-right: 50px;">
							<p>Powered by <a href="#"><img src="images/gmd.jpg" alt="Graña y Montero"></a><p>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>
<script>
$(window).bind("load", function() {
   $('#highcharts-4').css('overflow', 'visible');
   $('#highcharts-4').css('height', '100%');
});
</script>
